<!--suppress ALL-->
<!DOCTYPE html>
<!--修改页面-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改会议申请')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" th:inline="javascript">
        <form class="form-horizontal m" id="form-application-edit" th:object="${tmdMeetingApplication}">
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">编号</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="id" th:field="*{id}" type="text" readonly class="form-control">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">会议名称:</label>
                <div class="col-sm-8">
                    <input name="meetingName" th:field="*{meetingName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">创建人:</label>
                <div class="col-sm-8">
                    <input name="createPerson" th:field="*{createPerson}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态:</label>
                <div class="col-sm-8">
                    <select name="status" class="form-control m-b" th:field="*{status}">
                        <option value="0">未开始</option>
                        <option value="1">进行中</option>
                        <option value="2">已结束</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">时间</label>
                <div class="col-sm-8">
                    <input name="createTime" th:value="${#dates.format(tmdMeetingApplication.createTime, 'yyyy-MM-dd HH:mm:ss')}" class="form-control" placeholder="yyyy-MM-dd hh:ss" type="text" readonly>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">地点:</label>
                <div class="col-sm-8">
                    <select name="addressId" class="form-control m-b" id="addressId">
                        <option th:each="eve : ${tmdMeetingManager}" th:value="${eve.id}" th:text="${eve.meetingAddressName}" th:field="*{addressId}"></option>
                        <option th:value="*{addressId}" th:field="*{addressName}"></option>
<!--                        <option></option>-->
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">紧急程度:</label>
                <div class="col-sm-8">
                    <select name="level" class="form-control" th:field="*{level}">
                        <option value="">请选择等级(一级最高)</option>
                        <option value="0">普通</option>
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">部门:</label>
                <div class="col-sm-8">
                    <select class="form-control" id="deptIdList" name="deptId" th:field="*{deptId}">
                        <option value="">请选择部门</option>
                        <option value="100">若依科技</option>
                        <option value="101">深圳总公司</option>
                        <option value="102">长沙分公司</option>
                        <option value="103">研发部门</option>
                        <option value="104">市场部门</option>
                        <option value="105">测试部门</option>
                        <option value="106">财务部门</option>
                        <option value="107">运维部门</option>
                        <option value="108">市场部门</option>
                        <option value="109">财务部门</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">主持人:</label>
                <div class="col-sm-8">
                    <input name="hostId" th:field="${host.userName}"  th:value="*{hostId}" class="form-control" type="text">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">联系人:</label>
                <div class="col-sm-8">
                    <select class="form-control" id="linkman" name="linkmanId" >
                        <option  th:field="*{linkmanId}" th:value="*{linkmanId}" th:text="${user.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">联系方式</label>
                <div class="col-sm-9">
                    <input id="phoneNumber"  type="text" name="" class="form-control" th:value="${user.phonenumber}">
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">与会人</label>-->
<!--                <div class="col-sm-9">-->
<!--                    <input id="meetingPerson" type="text" class="form-control">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">与会人员：</label>
                <div class="col-sm-8">
                    <select  name="joinStaff" id="joinStaff" class="form-control select2-multiple"  multiple disabled>
                        <th:block th:each="everyuser:${userList}" th:with="joinStaff = ${tmdMeetingApplication.joinStaff}">
                            <option th:value="${everyuser.userId}" th:selected="${#arrays.contains(joinStaff,everyuser.userId.intValue())}" th:text="${everyuser.userName}"></option>
                        </th:block>
                    </select>
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">分享人</label>-->
<!--                <div class="col-sm-9">-->
<!--                    <input id="sharePerson" type="text" class="form-control">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">分享人：</label>
                <div class="col-sm-8">
                    <select  name="shareStaff" id="shareStaff" class="form-control select2-multiple" multiple disabled>
                        <th:block th:each="everyuser:${userList}" th:with="shareStaff = ${tmdMeetingApplication.shareStaff}">
                            <option th:value="${everyuser.userId}" th:selected="${#arrays.contains(shareStaff,everyuser.userId.intValue())}" th:text="${everyuser.userName}"></option>
                        </th:block>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">开始时间:</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="startTime" th:value="${#dates.format(tmdMeetingApplication.startTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">结束时间:</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="endTime" th:value="${#dates.format(tmdMeetingApplication.endTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">附件:</label>
                <div class="col-sm-8">
                    <input type="hidden" name="file" th:field="*{file}">
                    <div class="file-loading">
                        <input class="form-control file-upload" id="file" name="file" type="file">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">内容:</label>
                <div class="col-sm-8">
                    <textarea name="context" class="form-control">[[*{context}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注:</label>
                <div class="col-sm-8">
                    <textarea name="notes" class="form-control">[[*{notes}]]</textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "list/application";
        $("#form-application-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-application-edit').serialize());
            }
        }

        $("input[name='startTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='endTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(".file-upload").each(function (i) {
            var val = $("input[name='" + this.id + "']").val()
            $(this).fileinput({
                'uploadUrl': ctx + 'common/upload',
                initialPreviewAsData: true,
                initialPreview: [val],
                maxFileCount: 1,
                autoReplace: true
            }).on('fileuploaded', function (event, data, previewId, index) {
                $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
            $(this).fileinput('_initFileActions');
        });
    </script>

    <script th:inline="javascript">
        $(document).ready(function(){
            $.ajax({
                url: prefix + '/selectUserList',
                type: 'GET',
                dataType: 'json',
                success:function (response){
                    //获取用户列表填充到下拉框中
                    var userList = response.rows;
                    var selectElement = $('#linkman');
                    $.each(userList,function(index,user){
                        selectElement.append($('<option>',{
                            value: user.userId,
                            text: user.userName
                        }));
                    });
                },
                error: function(xhr,status,error){
                    console.error('错误',error)
                }
            })
        }),
            //     用来监听 下拉框中选中的值
            $('#linkman').change(function(){
                var selectUserId = $(this).val();
                $.ajax({
                    url: prefix + '/getUserPhoneNumber',
                    type: 'GET',
                    dataType: 'json',
                    data:{
                        userId:selectUserId
                    },
                    success:function (response){
                        if (response.code === 0){
                            var phoneNumber = response.data.phonenumber;
                            $('#phoneNumber').val(phoneNumber);
                        }else{
                            console.error('获取用户信息失败')
                        }
                    },
                    error: function(xhr,status,error){
                        console.error('错误',error)
                    }
                });
            }),


            // 获取部门列表
            $(document).ready(function(){
                $.ajax({
                    url: prefix + '/getDeptList',
                    type: 'GET',
                    dataType: 'json',
                    success:function (response){
                        //获取用户列表填充到下拉框中
                        var userList = response.rows;
                        var selectElement = $('#deptIdList');
                        $.each(userList,function(index,user){
                            selectElement.append($('<option>',{
                                value: user.deptId,
                                text: user.deptName
                            }));
                        });
                    },
                    error: function(xhr,status,error){
                        console.error('错误',error)
                    }
                })
            }),
            $(document).ready(function(){
                $.ajax({
                    url:prefix + '/getMeetingRoom',
                    type: 'GET',
                    dataType: 'json',
                    success:function (response){
                        //获取数据填充到下拉框中
                        var MeetRoom =  response.rows
                        var selectElement = $('#addressId');
                        $.each(MeetRoom,function(index,user){
                            selectElement.append($('<option>',{
                                value:user.id,
                                text:user.meetingAddressName
                            }));
                        });                    },
                    error:function(xhr,status,error){
                        console.log('错误',error)
                    }
                })
            })

            //随着下拉框选择中的部门 进行查询 显示该部门的所有用户在这个下拉框中
            $('#deptIdList').change(function(){
                //部门下来框中选中的值给到selectUserId
                var selectdeptId = $(this).val();
                $.ajax({
                    url: prefix + '/getDeptUserList',
                    type: 'GET',
                    dataType: 'json',
                    data:{
                        deptId:selectdeptId
                    },
                    success:function (response){
                        if (response.code === 200){
                            var userList = response.rows;
                            var selectElement = $('#meetingtPerson');
                            $.each(userList,function(index,user){
                                selectElement.append($('<option>',{
                                    value: user.deptId,
                                    text: user.userName
                                }));
                            });
                        }else{
                            console.error('获取用户信息失败')
                        }
                    },
                    error: function(xhr,status,error){
                        console.error('错误',error)
                    }
                });
            });
    </script>
</body>
</html>